<template>
	<view class="content">
		<image class="img" src="/static/image/user/login.png" mode="widthFix"></image>
		<view class="form">
			<view class="in">
				<input type="text" v-model.trim="data.username" placeholder="请输入用户名" />
			</view>
			<view class="in">
				<input type="text" v-model.trim="data.mail" placeholder="请输入邮箱" />
			</view>
			<view class="in">
				<input class="yzm" type="text" v-model.trim="data.yzm" placeholder="邮箱验证码" />
				<button class="yzmbt" @click="yzm(data.mail)">{{info1}}</button>
			</view>
			<view class="in">
				<input type="password" v-model.trim="data.password" placeholder="请输入密码" />
			</view>
			<view class="in">
				<input type="password" v-model.trim="data.password2" placeholder="请确认密码" />
			</view>
			<view class="loginBtn" @click="register()">
				<text class="btnValue">{{info}}</text>
			</view>
			<view class="Btn">
				<text id="text1" @click="login()">用户登录</text>
				<text id="text2">找回密码</text>
			</view>
		</view>
	</view>
</template>
<script>
	import con from 'pages/const.js'
	import api from 'pages/api.js'
	export default {
		data() {
			return {
				info: '注册',
				info1: '获取',
				data: {
					is1: true,
					is2: true,
					username: '',
					password: '',
					mail: '',
					yzm: '',
					password2: ''
				}
			}
		},
		computed: {
			isLogin() {
				return this.$store.state.isLogin
			}
		},
		methods: {
			register() {
				if (this.data.username === '' || this.data.mail === '' || this.data.password === '' || this.data
					.password2 === '')
					uni.showToast({
						'title': '请填写完整',
					});
				else {
					uni.showLoading({
						title: '注册中'
					});
					api.register(this.data, this.$store)
					//api.login(this.data,this.$store)
				}
			},
			dao(t){
				if(t.info1 <= 0){
					t.info1='重新获取'
					return
				}
				setTimeout(function () {
				    t.info1-=1
					t.dao(t)
				}, 1000);	
			},
			yzm(mail) {
				if(this.info1!=='获取'&&this.info1!=='重新获取')
					return
				if(mail===''){
					uni.showToast({
						'title': '邮箱不能为空',
					});
					return
				}
				uni.showLoading({
				    title: '加载中'
				});
				var t = this
				uni.request({
					url: con.request_ip + '/mail/send',
					data: {
						"email": mail
					},
					method: 'POST',
					success: function(res) {
						if(res.data.code===200){
							t.info1 = 60
							t.dao(t)
						}
						if(res.data.code){
							uni.hideLoading();
							uni.showToast({
								'title': res.data.msg,
								"icon": "none"
							});
						}
						else
							uni.showToast({
								'title': "网络或服务器错误",
								"icon": "none"
							});
					},
					fail: function(){
						uni.hideLoading();
						uni.showToast({
							'title': '请求发起失败',
						});
					}
				})
			},
			login() {
				uni.redirectTo({
					url: '/pages/user/login'
				})
			}
		}
	}
</script>
<style scoped>
	span {
		color: red;
	}

	.content {
		position: relative;
		top: var(--status-bar-height);
		background: #ffffff;
		width: 100vw;
		height: 100vh;
		text-align: center;
	}

	.img {
		position: relative;
		top: 200rpx;
		width: 200rpx;
		height: auto;
	}

	.form {
		padding: 0 80rpx;
		margin-top: 45%;
	}

	.in {
		display: inline-block;
		width: 100%;
		height: 80rpx;
		background: white;
		padding: 0 42rpx;
		box-sizing: border-box;
		margin-top: 18rpx;
	}

	.tishi {
		position: absolute;
	}
	input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 32rpx;
		border-radius: 40rpx;
		box-shadow: 0px 0px 6rpx #878787;
	}
	.yzm {
		width: 60%;
		height: 100%;
		text-align: center;
		font-size: 32rpx;
		float: left;
	}

	.yzmbt {
		width: 38%;
		height: 100%;
		text-align: center;
		font-size: 32rpx;
		background: #2db7f5;
		border-radius: 40rpx;
		color: white;
	}

	.loginBtn {
		width: 100%;
		height: 80rpx;
		background: #2db7f5;
		border-radius: 40rpx;
		margin-top: 64rpx;
		margin-bottom: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loginBtn .btnValue {
		color: white;
		font-size: 32rpx;
	}

	.Btn {
		text-align: center;
		color: #00aaff;
		font-size: 32rpx;
	}

	#text1 {
		padding: 0 100rpx 0 0;
	}

	#text2 {
		padding: 0 0 0 100rpx;
	}
</style>
